<template>
  <!-- 视频数据 -->
  <div class="videoDateShowBox">
    <div class="videoDateShowBoxLeft">
      <div class="svgOne">
        <svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="icon ZSVG"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"></path></svg>
        <span class="fontHt showDataNum">0</span>
      </div>
      <div class="svgOne">
        <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="icon" ><path fill-rule="evenodd" clip-rule="evenodd" d="M19.8071 9.26152C18.7438 9.09915 17.7624 8.36846 17.3534 7.39421L15.4723 3.4972C14.8998 2.1982 13.1004 2.1982 12.4461 3.4972L10.6468 7.39421C10.1561 8.36846 9.25639 9.09915 8.19315 9.26152L3.94016 9.91102C2.63155 10.0734 2.05904 11.6972 3.04049 12.6714L6.23023 15.9189C6.96632 16.6496 7.29348 17.705 7.1299 18.7605L6.39381 23.307C6.14844 24.6872 7.62063 25.6614 8.84745 25.0119L12.4461 23.0634C13.4276 22.4951 14.6544 22.4951 15.6359 23.0634L19.2345 25.0119C20.4614 25.6614 21.8518 24.6872 21.6882 23.307L20.8703 18.7605C20.7051 17.705 21.0339 16.6496 21.77 15.9189L24.9597 12.6714C25.9412 11.6972 25.3687 10.0734 24.06 9.91102L19.8071 9.26152Z"></path></svg>
        <span class="fontHt showDataNum">0</span>
      </div>
      <div class="svgOne">
        <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="icon"><path d="M12.6058 10.3326V5.44359C12.6058 4.64632 13.2718 4 14.0934 4C14.4423 4 14.78 4.11895 15.0476 4.33606L25.3847 12.7221C26.112 13.3121 26.2087 14.3626 25.6007 15.0684C25.5352 15.1443 25.463 15.2144 25.3847 15.2779L15.0476 23.6639C14.4173 24.1753 13.4791 24.094 12.9521 23.4823C12.7283 23.2226 12.6058 22.8949 12.6058 22.5564V18.053C7.59502 18.053 5.37116 19.9116 2.57197 23.5251C2.47607 23.6489 2.00031 23.7769 2.00031 23.2122C2.00031 16.2165 3.90102 10.3326 12.6058 10.3326Z"></path></svg>
        <span class="fontHt">分享</span>
      </div>
      <div class="svgOne-i" @click="noUp">
        <svg  xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">
          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
        </svg>
        <span class="fontHt" title="视频不能播放?点我反馈">反馈</span>
      </div>
    </div>
    <div class="videoDateShowBoxRight">
      <button type="button" class="button-def skyblue fontHt">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brush-fill" viewBox="0 0 16 16">
          <path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04z"/>
        </svg>写评价</button>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
        <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
      </svg>
    </div>
  </div>
  <div class="spxx" v-for="(item, index) in list.items" :key="index">
    <!-- 视频图片 -->
    <div class="sptp">
      <img :src="item.vImgL">
    </div>
    <!-- 视频详情 -->
    <div class="spxq">
      <p class="fontHt block-my sp-bt">{{item.vName}}</p>
      <div class="bfxx">
        {{ item.vData.split(',')[0] }}播放&nbsp;&nbsp;·&nbsp;&nbsp;{{ item.vData.split(',')[1] }}万弹幕&nbsp;&nbsp;·&nbsp;&nbsp;{{ item.vData.split(',')[2] }}万追番
      </div>
      <div class="flqt">
        <a href="" class="fl">番剧</a>&nbsp;&nbsp;&nbsp;<span class="gxsj"><span v-if="!item.vIndex">连载中&nbsp;·&nbsp;每周五2点更新</span><span v-if="item.vIndex">已完结</span></span>
      </div>
      <!-- 视频简介 -->
      <div class="spjj">
        <span class="xqzk fontHt">展开</span>
        <span class="xqjj" v-text="item.vMsg">

        </span>
      </div>
      <!-- 视频评价 -->
      <div class="videoEvaBox">
        <!-- 视频评分 -->
        <span class="videoEvaNum"><span class="span-sm fontHt">{{ item.vData.split(',')[3] }}</span>分&nbsp;<span class="span-qt">{{ item.vData.split(',')[4] }}万人评价</span></span>
        <div class="commentStr">
          <ul class="pjx-x">
            <li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet-half" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
              </svg>
            </li>
            <li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet-half" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
              </svg>
            </li>
            <li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet-half" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
              </svg>
            </li>
            <li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet-half" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
              </svg>
            </li>
            <li>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet-half" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
              </svg>
            </li>
          </ul>
          <span class="fontHt mar-l-10">评分</span>
        </div>
        <button type="button" class="button-def pink-button fontHt">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
          </svg>
          &nbsp;追番
        </button>
      </div>
      <div class="showMsg">
        <span class="fontHt">本网站的资源皆为网络收集，如果有广告请勿相信！</span>
      </div>
    </div>
  </div>
  <div class="fk" v-show="isNo">
    <div class="formBack">
      <svg @click="noUp"  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
        <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
      </svg>
      <span class="fkTitle">提交不能播放的剧集</span>
      <span>不能播放的视频为：{{list.vNameN}}</span>
      <div class="jjList">
        <div class="epicWaiKe" v-for="(item, index) in list.epicListL" :key="index">
            <button type="button" class="but-jj fontHt" @click="clickOne(item.vEpicName)" :class="{activeHover:item.vEpicName === list.no.vEpicN}">{{item.vEpicName}}</button>
        </div>
      </div>
<!--      <textarea v-model.trim="list.no.vEpicN" class="commentInput errorShow" type="text" placeholder="请在这里描述一下不能看的视频,感谢!"></textarea>-->
      <div class="butBox">
        <button type="button" class="commentUpButton fontHt" @click="bnktj">提交</button>
      </div>
      <div class="tipMsg" v-show="tipIndex" :class="{red:tip === '服务器娘错误！添加失败！' || tip === '请选择不能看的剧集'}">{{tip}}</div>
    </div>
  </div>
</template>

<script setup>

import {onMounted, reactive, ref} from 'vue'
import API from '@/api/AxiosConfig'
import {useRoute} from "vue-router";

const route = useRoute()
const list = reactive({
  items: [],
  no:{
    vEpicN:null,
    vNameN:route.query.look,
  },
  epicListL:[],
  NameN:'',
})
let videoId = route.query.look
const epicNum = ref(null)
const tip = ref(null)
const tipIndex = ref(false)
const isNo = ref(false)

onMounted(() => {
  API({ url: '/api/videoMsg/'+videoId+'', method: 'Get' }).then(res => {
    list.items = res.data
    list.vNameN = list.items[0].vName
    // console.log(res.data)
  }).catch(err => {
    // console.log(err)
  })
  API({ url: '/api/epicList/'+videoId+'', method: 'get' }).then(res => {
    list.epicListL = res.data
    list.epicListL.sort(function (a,b){
      return a.vEpicName - b.vEpicName
    })
  }).catch(err => {
  })
})
function noUp() {
  isNo.value = !isNo.value
}
function clickOne(i) {
  // for (let a = 0 ;a<list.no.vEpicN.split(',').length;a++){
  //   console.log('l',list.no.vEpicN[a])
  //   if (list.no.vEpicN[a]*1 === i){
  //     console.log('i:',list.no.vEpicN[a])
  //   }else {
  //
  //     list.epicList.push(i)
  //   }
  // }
  // for (let o = 0;o<list.epicList.length;o++){
  //   list.no.vEpicN = list.no.vEpicN + list.epicList[o] + ','
  // }
  // list.epicList = []
  list.no.vEpicN = i
}
function bnktj() {
  if (list.no.vEpicN !== '' && list.no.vEpicN !== null && list.no.vEpicN !== undefined) {
    API({url: '/api/noInsert/'+list.no.vEpicN+'/'+list.no.vNameN, method: 'post'}).then(res => {
      tip.value = res.data
      ts()
    }).catch(err => {

    })
  }else {
    tip.value = '请选择不能看的剧集'
    ts()
  }
}
function ts()  {
  tipIndex.value = true
  setTimeout(() =>{
    tipIndex.value = false
  },3000)
}
</script>

<style lang="less" scoped>
.jj-span{
  font-size: 10px;
  font-weight: bold;
}
/* 剧集按钮 */
.jjList{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* padding: 0px 10px 0px 10px; */
}
.but-jj{
  width: 70px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #212529;
  margin:5px 2px;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}
.but-jj:hover,.activeHover{
  background-color: #00a1d6;
  color: white;
}
.tipMsg{
  padding: 4px 10px;
  background-color: #a0ccff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  position: absolute;
  top: 0;
  left: 22.5%;
  width: 50%;
  text-align: center;
  color: #FFFFFF;
}
.butBox{
  display: flex;
  justify-content: center;
}
.red{
  background-color: deeppink;
}
.commentUpButton{
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 15px;
  border-radius: 4px;
  outline: none;
  border: none;
  background-color: #2d8cf0;
  margin-top: 15px;
}
.bi-x-lg{
  position: absolute;
  right: 20px;
  top: 20px;
}
.fkTitle{
  font-size: 20px;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.commentInput{
  display: inline-block;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid #F1F2F3;
  width: 350px;
  height: 45px;
  line-height: 32px;
  transition: 0.2s;
  padding: 5px 10px;
  outline: none;
  vertical-align: middle;
  resize: none;
  font-size: 15px;
  background: #F1F2F3;
  font-family: 黑体;
  font-weight: bold;
}
.errorShow{
  height: 100px;
}
.formBack{
  position: relative;
  background-color: #FFFFFF;
  padding: 30px 30px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.fk{
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(35, 35, 35, 0.6);
  z-index: 100;
  font-family: 黑体;
  font-weight: bold;
}
.sptp>img{
  width: 150px;
  border-radius: 4px;
}
.showMsg{
  display: flex;
  width: 100%;
  height: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  color: red;
  position: absolute;
  bottom: 0;
  left: 0;
}
.bi-three-dots-vertical{
  margin-left: 10px;
}
/* 视频数据 */
.videoDateShowBox{
  color: #5b5b5b;
  font-size: 15px;
  height: 50px;
  display: flex;
  border-bottom: 1px solid #e7e7e7;
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
}
.videoDateShowBoxRight,.videoDateShowBoxLeft{
  display: flex;
  align-items: center;
}
.videoDateShowBox-right>i{
  font-size: 16px;
  color: #939393;
}
.svgOne{
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.svgOne>svg{
  width: 35px;
}
.svgOne>i{
  font-size: 23px;
  margin-right: 10px;
}
.showDataNum{
  font-size: 18px;
}
.ZSVG{
  width: 28px !important;
  margin-right: 5px;
}
#wtfk{
  color: coral;
}
/* 笔记 */
.button-def{
  width: 80px;
  height: 35px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 15px;
  border-radius: 4px;
  border: none;
}
/* 视频信息 */
.spxq{
  margin-left: 10px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.spxx{
  display: flex;
  padding: 10px 0px 10px 0px;
  border-bottom: 1px solid #e7e7e7;
}
/* 视频标题 */
.sp-bt{
  font-size: 20px;
  margin-bottom: 5px;
}
.block-my{
  display:block;
  width: 100%;
}
/* 播放信息 */
.bfxx{
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}
/* 视频分类及更新时间 */
.flqt{
  vertical-align: middle;
  height: 16px;
  line-height: 16px;
  margin-right: 10px;
  color: #212121;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 5px;
}
.fl{
  text-decoration: none;
  color: #000000;
}
/* 简介 */
.xqjj{
  width: 80%;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  position: relative;
  padding-bottom: 16px;
  font-size: 14px;
}
.xqzk{
  position: absolute;
  right: 20px;
  color: #00A1D6;
  user-select: none;
}
/* 按钮颜色 */
.skyblue{
  background-color: #00a1d6;
  border: 1px solid #00a1d6;
}
.pink-button{
  background-color: #fb7299;
  border: 1px solid #fb7299;
}
/* 视频评价 */
.videoEvaBox{
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
}
.fontHt{
  font-family: "黑体";
  font-weight: bold;
}
.mar-l-10{
  margin-left: 10px;
}
.commentStr{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 33px;
  border-radius: 4px;
  border: 1px solid silver;
  -webkit-transition: width .3s ease;
  -o-transition: width .3s ease;
  transition: width .3s ease;
  color: #505050;
  background-color: #fff;
  white-space: nowrap;
  cursor: pointer;
  padding: 0 10px 0 10px;
  margin-right: 12px;
}

.pjx-x{
  list-style: none;
  margin: 0;
  padding: 0;
}
.pjx-x>li{
  float: left;
}
/* 视频评分 */
.videoEvaNum{
  color: #ffa726;
  display: flex;
  align-items: center;
  position: absolute;
  height: 35px;
  right: 10px;
  top: 40px;
  user-select: none;
}
.span-big{
  font-size: 35px;
}
.span-sm{
  font-size: 25px;
}
.span-qt{
  font-size: 13px;
  color: #999;
}

.svgOne,.svgOne-i{
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.svgOne-i>svg{
  width: 23px;
  fill: #d96127;
  margin-right: 5px;
}
.svgOne>svg{
  width: 35px;
}

</style>
